$(function() {
    var screenWidth = $("#container").innerWidth();
    var screenHeight = $("#container").innerHeight();
    var imgWidth = $("#men").innerWidth();
    var imgHeight = $("#men").innerHeight();
    var stepA = 6;
    var boomStep = 300;
    $("body").keydown(function (e) {
        $("#men").stop();
        var flag = e.which;
        var leftFlag = leftSize();
        var topFlag = topSize();
        if (flag == 37) {
            if(leftFlag - stepA < 0) {
                return;
            }
            $("#men").animate({left:'-='+stepA+'px',},1);
        }
        if(flag == 38) {
            if(topFlag - stepA < 0) {
                return;
            }
            $("#men").animate({top:'-='+stepA+'px'},1);
        }
        if(flag == 39) {
            if(leftFlag + stepA > screenWidth - imgWidth) {
                return false;
            }
            $("#men").animate({left:'+='+stepA+'px'},1);
        }
        if(flag == 40) {
            if(topFlag + stepA > screenHeight - imgHeight) {
                return;
            }
            $("#men").animate({top:'+='+stepA+'px'},1);
        }
        if(flag == 32) {
            if($("#boom").is(":animated")) {
                return false;
            }
            $("#boom").css("display","block").css("left",$("#men").css("left"))
                .css("top",$("#men").css("top")).animate({left:'+='+boomStep+'px'},900,function(){
                    $("#boom").css("display","none");
                })
        }
    })
})
function leftSize() {
    var cLeft = $("#container").offset().left;
    var thisLeft = $("#men").offset().left;
    return thisLeft - cLeft;
}
function topSize() {
    var cTop = $("#container").offset().top;
    var thisTop = $("#men").offset().top;
    return thisTop - cTop;
}
